<template>
  <div class="staff_ditails">
    <div class="container" style="position: fixed; top: 0;left: 0;">
      <span class="title">人员详细信息</span>
    </div>
    <div class="basic_info">
      <el-image class="image" :src="staffInfo.photoUrl" fit="cover"></el-image>
			<div class="basic_info_box">
				<span class="name">姓名：{{staffInfo.fullname}}</span>
				<div class="flex_box">
					<div class="flex_row">
						<span class="left">ID号：</span>
						<span>{{staffInfo.username}}</span>
					</div>
					<div class="flex_row">
						<span class="left">班组：</span>
						<span>{{staffInfo.groupName}}</span>
					</div>
					<div class="flex_row">
						<span class="left">性别：</span>
						<span>{{staffInfo.sex}}</span>
					</div>
					<div class="flex_row">
						<span class="left">籍贯：</span>
						<span>{{staffInfo.nativePlace}}</span>
					</div>
					<div class="flex_row">
						<span class="left">出生日期：</span>
						<span>{{staffInfo.birthday}}</span>
					</div>
					<div class="flex_row">
						<span class="left">电话：</span>
						<span>{{staffInfo.phone}}</span>
					</div>
					<div class="flex_row">
						<span class="left">身份证号：</span>
						<span>{{staffInfo.idNumber}}</span>
					</div>
					<div class="flex_row">
						<span class="left">邮箱：</span>
						<span>{{staffInfo.email}}</span>
					</div>
				</div>
			</div>
    </div>

    <div class="tab_control">
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="基本信息" name="1">
					<div class="flex_container">
						<div class="flex_row flex_row_top">
							<span class="left left_width">政治面貌：</span>
							<span class="right">{{staffInfo.politicsStatus}}</span>
						</div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">血型：</span>
							<span class="right">{{staffInfo.bloodType}}</span>
						</div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">学历：</span>
							<span class="right">{{staffInfo.educationText}}</span>
						</div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">身体状况：</span>
							<span class="right">{{staffInfo.medicalReportImg}}</span>
						</div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">婚姻：</span>
							<span class="right">{{staffInfo.maritalStatus}}</span>
						</div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">紧急联系电话：</span>
							<span class="right">{{staffInfo.emergencyCall}}</span>
						</div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">身份证签发单位：</span>
							<span class="right">{{staffInfo.idIssuer}}</span>
						</div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">身份证有效期：</span>
							<span class="right">{{staffInfo.idStartTime}} - {{staffInfo.idEndTime}}</span>
						</div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">家庭住址：</span>
							<span class="right">{{staffInfo.address}}</span>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="工作信息" name="2">
					<div class="flex_container">
						<div class="flex_row flex_row_top">
							<span class="left left_width">所属组织：</span>
							<span class="right">{{staffInfo.depName}}</span>
						</div>
            <div class="flex_row flex_row_top">
              <span class="left left_width">标段：</span>
              <span class="right">{{staffInfo.bidSectionName}}</span>
            </div>
            <div class="flex_row flex_row_top">
              <span class="left left_width">所属工区：</span>
              <span class="right">{{staffInfo.workAreaName}}</span>
            </div>
            <div class="flex_row flex_row_top">
              <span class="left left_width">角色：</span>
              <span class="right">{{staffInfo.roleName}}</span>
            </div>
            <div class="flex_row flex_row_top">
              <span class="left left_width">特殊工种：</span>
              <span class="right">{{staffInfo.specialTypeWork}}</span>
            </div>
            <div class="flex_row flex_row_top">
              <span class="left left_width">是否考核：</span>
              <span class="right">{{ staffInfo.isReg == 0 ? "否" : "是" }}</span>
            </div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">入职时间：</span>
							<span class="right">{{staffInfo.accessionTime}}</span>
						</div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">合同编号：</span>
							<span class="right">{{staffInfo.contractNO}}</span>
						</div>
						<div class="flex_row flex_row_top">
							<span class="left left_width">合同有效期：</span>
							<span class="right">{{staffInfo.contractStartTime}} - {{staffInfo.contractEndTime}}</span>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="奖惩记录" name="3">
					<div class="flex_container box_top">
						<el-table :data="bonusPenaltyRecord" tooltip-effect="dark" size="mini" :max-height="tableHeight" style="width: 100%;">
							<el-table-column prop="name" label="姓名"></el-table-column>
							<el-table-column prop="id" label="ID"></el-table-column>
							<el-table-column prop="photo" label="拍照信息"></el-table-column>
							<el-table-column prop="sex" label="操作分数"></el-table-column>
							<el-table-column prop="organization" label="总积分"></el-table-column>
							<el-table-column prop="type" label="备注信息"></el-table-column>
							<el-table-column prop="role" label="操作时间"></el-table-column>
							<el-table-column prop="group" label="操作人员"></el-table-column>
						</el-table>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>

		<el-row class="but_box">
			<el-button type="text" icon="icon iconfont iconfanhui" plain @click="returnPreviousPage">返回</el-button>
		</el-row>
  </div>
</template>

<script>
import HttpInterface from "../../util/httpInterface";
import HttpConfig from '../../util/httpConfig';
import { mapState } from "vuex";

export default {
  name: "StaffDetailsModel",
  components: {},
  data() {
    return {
      activeName: "1",
      tableHeight: 0,
      bonusPenaltyRecord: [],
      staffInfo: {}
    };
  },

  computed: {
    ...mapState(["educationInfo", "group", "biaoduanList", "marriage"]),
    ...mapState(["bloodTypeInfo", "politicsStatusInfo", "role"])
  },

  created() {
    this.tableHeight = window.innerHeight - 360;
  },

  methods: {
    returnPreviousPage() {
      this.$parent.subPage = 0;
    },

    getStaffDetail (id) {
      var params = { id };
      HttpInterface.requestPost(this, HttpInterface.URL_DUTYUSER_DETAIL, params, (res) => {
        var { success, other } = res.data;
        if (success) {
          let { user, detail } = other;
          for (const key in user) detail[key] = user[key];
          this.readerData(detail);
        }
      }, null, true);
    },

    readerData(detail) {
      let { group, educationInfo, biaoduanList, marriage, bloodTypeInfo, politicsStatusInfo, role } = this;
      let str = '';

      educationInfo.forEach(key => {  // 学历
        if (detail.education == key.dicid) detail.educationText = key.itemvalue;
      })

      group.forEach(key => {  // 班组
        if (detail.groupid == key.id) detail.groupName = key.name;
      })

      biaoduanList.forEach(item => {
        if (detail.bidSection == item.id) detail.bidSectionName = item.name;
      })

      marriage.forEach(item => {  // 婚姻
        if (detail.maritalStatus == item.dicid) detail.maritalStatus = item.itemvalue;
      })

      bloodTypeInfo.forEach(item => {  // 血型
        if (detail.bloodType == item.dicid) detail.bloodType = item.itemvalue;
      })

      politicsStatusInfo.forEach(item => {  // 政治面貌
        if (detail.politicsStatus == item.dicid) detail.politicsStatus = item.itemvalue;
      })

      role.forEach(item => {  // 政治面貌
        if (detail.roleId == item.roleid) detail.roleName = item.rolename;
      })

      if (detail.workAreaList.length > 0) {
        detail.workAreaList.forEach(key => {
          str += key.name + "、";
        })
        detail.workAreaName = str.slice(0, -1);
      }

      detail.photoUrl = HttpConfig.serverUrl + detail.photo;
      detail.sex = detail.title == 1 ? "男" : "女";

      detail.idStartTime = detail.idStartTime && detail.idStartTime.replace(/-/g, ".");
      detail.idEndTime = detail.idEndTime && detail.idEndTime.replace(/-/g, ".");
      detail.contractStartTime = detail.contractStartTime && detail.contractStartTime.replace(/-/g, ".");
      detail.contractEndTime = detail.contractEndTime && detail.contractEndTime.replace(/-/g, ".");
      detail.accessionTime = detail.accessiontime && detail.accessiontime.split(" ")[0];
      this.staffInfo = detail;
    }
  }
};
</script>

<style scoped lang="scss">
.staff_ditails{
	padding: 20px;
	box-sizing: border-box;
	margin-top: 70px;

  .basic_info{
    display: flex;
    align-items: center;

    .image{
      width: 120px;
      height: 160px;
      margin-right: 50px;
    }

    .basic_info_box{
      display: flex;
      flex-direction: column;
      flex: 1;

      .name{
        font-size: 16px;
        font-weight: bold;
        line-height: 50px;
      }

      .flex_box{
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        margin-left: -27px;
      }
    }
  }
}

/* 选项卡内容 */
.flex_container{
	margin-top: 80px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-left: 20px;
	box-sizing: border-box;

  .flex_row_top{
    margin-top: 16px;
  }

  .box_top{
    margin-top: 60px;
  }
}

.but_box{
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 1000;
}

.flex_row{
  width: 30%;
  font-size: 14px;
  line-height: 30px;
  display: flex;
  align-items: center;

  .left{
    width: 70px;
    display: inline-block;
    text-align: right;
  }

  .left_width{
    width: 140px;
    color: #5c6570;
  }

  .right{
    display: inline-block;
    width: 300px;
    height: 34px;
    line-height: 34px;
    background: #f8f8f8;
    padding: 3px 0 3px 14px;
    margin-left: 5px;
  }
}

.el-button--text >>> .iconfanhui{
  margin-right: 4px;
  font-size: 18px;
  vertical-align: -2px;
}
</style>
